<template>
  <div>
    <div class="routeBox">
      <button class="addCargoOwner" @click="addRouteItemEvent()">
        <i class="el-icon-plus iconBtn"></i>
        <span>添加线路</span>
      </button>
    </div>
    <div class="main">
      <div class="NoRouteBox" v-if="addRouteForm.routeItem.length==0">
        <img class="NoRoute_pic" src="../../../assets/img/noData@2x.png" alt="">
      </div>
      <el-form :model="addRouteForm" ref="addRouteForm" label-width="92px">
        <el-form-item label-width="0" prop="routeItem" v-for="(item, ItemIndex) in addRouteForm.routeItem"
          :key="ItemIndex">
          <div class="addRouteItem">
            <div class="main_head">
              <div class="text">线路{{ ItemIndex + 1 }}</div>
              <div class="deleteBtn" @click="deleteRouteItemEvent(ItemIndex)">
                删除
              </div>
            </div>
            <div class="formBox">
              <div style="width: 332px" class="lineName">
                <el-form-item label="路线名称" prop="lineName">
                  <el-input placeholder="请输入" v-model="addRouteForm.routeItem[ItemIndex].lineName"></el-input>
                </el-form-item>
              </div>

              <el-form-item label="发货地" prop="departurePlaceTable">
                <el-table class="placeTableStyle" :data="addRouteForm.routeItem[ItemIndex].departurePlaceTable"
                  :header-row-style="{ height: '40px' }" :row-style="{ height: '48px' }">
                  <el-table-column align="center" prop="serialNumber" label="序号" width="50"></el-table-column>
                  <el-table-column align="center" label="地址">
                    <template slot-scope="scope">
                      <el-form-item prop="">
                        <el-input class="inputAddress" placeholder="请输入发货地址"
                          @focus="isShowMap(scope.$index, '发货地', ItemIndex)" suffix-icon="el-icon-location-outline"
                          v-model="scope.row.address">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="详细门牌号">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input placeholder="请输入" v-model="scope.row.detail">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="发货人">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input v-model="scope.row.contact"> </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="发货电话">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-input placeholder="请输入" v-model="scope.row.phone">
                        </el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <i class="iconfontcolor icon-a- commonStyle" v-show="scope.$index == 0" @click="
                        addrouteData(
                          'DeparturePlace',
                          scope.$index,
                          ItemIndex
                        )
                        "></i>
                      <i class="iconfontcolor icon-a-- commonStyle" v-show="scope.$index > 0" @click="
                        deleteRoute('DeparturePlace', scope.$index, ItemIndex)
                        "></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>

              <el-form-item label="目的地" prop="destinationPlaceTable">
                <el-table class="placeTableStyle" :data="addRouteForm.routeItem[ItemIndex].destinationPlaceTable" :header-row-style="{ height: '40px' }" :row-style="{ height: '48px' }">
                  <el-table-column align="center" prop="serialNumber" label="序号" width="50"></el-table-column>
                  <el-table-column align="center" label="地址">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入收货地址" suffix-icon="el-icon-location-outline" v-model="scope.row.address"
                        @focus="isShowMap(scope.$index, '收货地', ItemIndex)">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="详细门牌号">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入" v-model="scope.row.detail">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="收货人">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.contact"> </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="收货电话">
                    <template slot-scope="scope">
                      <el-input placeholder="请输入" v-model="scope.row.phone">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <i class="iconfontcolor icon-a- commonStyle" v-show="scope.$index == 0" @click="
                        addrouteData('destination', ItemIndex, ItemIndex)
                        "></i>
                      <i class="iconfontcolor icon-a-- commonStyle" v-show="scope.$index > 0" @click="
                        deleteRoute('destination', scope.$index, ItemIndex)
                        "></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加路线 -->

    <el-dialog title="地址详情" :visible.sync="detailsVisible" class="details_dialog">
      <div class="mapBox">
        <div class="addressInfo">
          <i class="iconfontcolor icon-dizhixiangqing"></i>
          <div class="info">
            <h3 class="placeName">渝北光环广场</h3>
            <div style="margin-bottom: 8px">
              重庆市渝北区湖彩路118号 2F-1406
            </div>
            <div style="display: flex">
              <div style="margin-right: 19px">王全胜</div>
              <div>19887220324</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 地址搜索 -->

    <el-dialog title="地址搜索" class="map_dialog" :visible.sync="VisibleMap" width="500px">
      <div class="mapBox">
        <div class="addMapBox">
          <iframe class="map" src="/orderMap.html" ref="iframe" frameborder="0" marginheight="0" marginwidth="0"
            scrolling="no"></iframe>
        </div>
        <div style="display: flex; justify-content: flex-end; margin-left: auto">
          <el-button class="cancelBtn" @click="VisibleMap = false">取 消</el-button>
          <el-button class="submitBtn" type="primary" @click="addsearchAddress()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    routeItemData: {
      typeof: Array,
      default: () => [],
    },
  },
  data() {
    return {
      iframeWin: {}, //iframe绑定的页面的对象。
      detailsVisible: false,
      searchValue: "",
      VisibleMap: false,
      ItemIndex: "", //记录线路routeItem[序号]
      PlaceLabel: "", //记录 发货地 或 目的地
      index: "", //记录departurePlaceTable[序号] 或 destinationPlaceTable[序号]

      addRouteForm: {
        routeItem: [
          {
            lineName: "", //线路名称

            departurePlaceTable: [
              {
                serialNumber: 1,
                address: "",
                detail: "",
                contact: "",
                phone: "",
                addressType: "0",
                lat: "",
                lng: "",
              },
            ],
            destinationPlaceTable: [
              {
                serialNumber: 1,
                address: "",
                detail: "",
                contact: "",
                phone: "",
                addressType: "1",
                lat: "",
                lng: "",
              },
            ],
          },
        ],
      },

      //发货地默认空对象
      DepartureDefault: {
        addressType: "0",
        serialNumber: "",
        address: "",
        detail: "",
        contact: "",
        phone: "",
      },

      // 目的地
      destinationDefault: {
        addressType: "1",
        address: "",
        detail: "",
        contact: "",
        phone: "",
        lat: "",
        lng: "",
      },
    };
  },
  methods: {
    // 获取回填数据
    getRouteItemData() {
      if (this.$route.query.ownerId) {
        this.addRouteForm.routeItem = this.$options.propsData.routeItemData;
      } else {
        this.addRouteForm.routeItem == []
          ? this.addRouteForm.routeItem
          : this.$options.propsData.routeItemData;
      }

      //如果为空数组,则为默认数组保存路线至少显示一个
      // console.log('线路信息', this.addRouteForm.routeItem);
      let arr = this.addRouteForm.routeItem;
      for (let i = 0; i < arr.length; i++) {
        this.getSerialNumber(arr[i].departurePlaceTable);
        this.getSerialNumber(arr[i].destinationPlaceTable);
      }
    },

    addrouteData(params, scope, ItemIndex) {
      // console.log('item', scope);

      const { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[ItemIndex];
      // console.log(this.addRouteForm.routeItem[ItemIndex]);

      if (params == "DeparturePlace") {
        // 发货地
        //发货地表格加一行数据
        departurePlaceTable.push(
          JSON.parse(JSON.stringify(this.DepartureDefault))
        );
        //解决表格序号
        let index = departurePlaceTable.length - 1;
        departurePlaceTable[index].serialNumber = index + 1;
      } else if (params == "destination") {
        destinationPlaceTable.push(
          JSON.parse(JSON.stringify(this.destinationDefault))
        );
        let index = destinationPlaceTable.length - 1;
        destinationPlaceTable[index].serialNumber = index + 1;
      }
    },
    deleteRoute(params, index, ItemIndex) {
      const { departurePlaceTable, destinationPlaceTable } =
        this.addRouteForm.routeItem[ItemIndex];
      if (params == "DeparturePlace") {
        departurePlaceTable.splice(index, 1);
        departurePlaceTable.forEach((item, index) => {
          item.serialNumber = index + 1;
        });
      } else if (params == "destination") {
        destinationPlaceTable.splice(index, 1);
        destinationPlaceTable.forEach((item, index) => {
          item.serialNumber = index + 1;
        });
      }
    },
    // 添加线路
    addRouteItemEvent() {
      this.addRouteForm.routeItem.push({
        lineName: "", //线路名称
        // 发货地
        departurePlaceTable: [
          {
            addressType: "0",
            serialNumber: 1,
            address: "",
            detail: "",
            contact: "",
            phone: "",
            lat: "",
            lng: "",
          },
        ],
        // 目的地 表格数据
        destinationPlaceTable: [
          {
            addressType: "1",
            serialNumber: 1,
            address: "",
            detail: "",
            contact: "",
            phone: "",
            lat: "",
            lng: "",
          },
        ],
      });
    },
    // 删除线路
    deleteRouteItemEvent(ItemIndex) {
      this.addRouteForm.routeItem.splice(ItemIndex, 1);
    },
    getSerialNumber(arr) {
      //前端解决序号  这里不考虑分页 尺寸
      arr.forEach((item, i) => {
        let num = i + 1;
        item.serialNumber = num;
      });
    },
    isShowMap(index, PlaceLabel, ItemIndex) {
      this.VisibleMap = true;
      //存放序号
      this.ItemIndex = ItemIndex;
      this.PlaceLabel = PlaceLabel;
      this.index = index;
    },
    // 回填地址信息到输入框  通过存放的序号 找到输入框回填数据
    addsearchAddress() {
      let mood = this.$refs.iframe.contentWindow.ToManualRoamFunc();

      // console.log('ToManualRoamFunc', mood);
      localStorage.getItem("addressInfoItem", JSON.stringify(mood));

      // console.log('拿到了吗', JSON.parse(localStorage.getItem('addressInfoItem')));
      if (!localStorage.getItem("addressInfoItem")) {
        this.$message.error("请搜索选择地址信息");
        return;
      }

      const { lat, lng, address } = JSON.parse(
        localStorage.getItem("addressInfoItem")
      );

      if (this.PlaceLabel == "发货地") {
        // console.log(this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[this.index]);
        localStorage.removeItem("addressInfoItem");

        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].address = address;
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].lng = lng;
        this.addRouteForm.routeItem[this.ItemIndex].departurePlaceTable[
          this.index
        ].lat = lat;
      } else if ((this.PlaceLabel = "目的地")) {
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].address = address;
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].lng = lng;
        this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable[
          this.index
        ].lat = lat;
        // console.log('目的地数据', this.addRouteForm.routeItem[this.ItemIndex].destinationPlaceTable);
        localStorage.removeItem("addressInfoItem");
      }
      this.VisibleMap = false;
    },
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.routeBox {
  margin-bottom: 15px;

  .addCargoOwner {
    background-color: #1890ff;
    border-radius: 4px;
    height: 32px;
    width: 105px;
    color: #ffffff;
    font-size: 12px;
    padding: 8px 17px 9px 17px;
    transition: 0.2s;
    cursor: pointer;
    margin-right: 17px;

    .iconBtn {
      margin-right: 7px;
      font-size: 15px;
    }

    &:hover {
      opacity: 0.8;
    }
  }
}

.main {
  width: 100%;
  background-color: #fff;
  min-height: calc(100vh - 326px);
  margin-bottom: 16px;
  .NoRouteBox{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 326px);
    .NoRoute_pic{
      width: 30%;
    }
  }

  .addRouteItem {
    border: 1px solid #f0f0f0;
    border-top: none;

    .main_head {
      background-color: #f5f6f8;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 22px;

      >.text {
        color: #262626;
        font-size: 14px;
        font-weight: bold;
      }

      >.deleteBtn {
        color: #1890ff;
        font-size: 12px;
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

// 地址详情
.details_dialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 7px;
  }

  ::v-deep .el-dialog__body {
    padding: 5px 7px 7px;
  }

  .mapBox {
    width: 486px;
    height: 372px;
    background-color: #666666;
    position: relative;
    z-index: 999;

    .addressInfo {
      position: absolute;
      border-radius: 4px;
      top: 242px;
      left: 33px;
      width: 420px;
      height: 100px;
      background-color: #fff;
      display: flex;
      align-items: center;
      color: #9c9c9c;
      font-size: 12px;

      .icon-dizhixiangqing {
        margin: 27px 19px 27px 20px;
        font-size: 46px;

        .placeName {
          font-size: 16px;
          color: #262626;
          font-weight: bold;
          margin-bottom: 8px;
        }
      }
    }
  }
}

// 添加路线
.addRouteItem {
  .formBox {
    padding: 23px 42px 31px 0px;
   // overflow-y: scroll;
    width: 100%;
    // height: calc(100vh - 279px);
    // margin-bottom: 16px;

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #666666;
        font-size: 12px;
      }
    }

    //   表单
    ::v-deep .el-form-item__label {
      line-height: 32px;
      font-size: 12px;
      color: #262626;
      padding-top: 4px;
    }

    ::v-deep .el-input__inner {
      line-height: 32px;
      height: 32px;
      padding: 0 20px 0 10px;
    }

    // 发货地 目的地表格样式
    .placeTableStyle {
      // ::v-deep .el-table .el-table__cell {
      //   padding: 0px;
      // }

      ::v-deep .addRoute_dialog .formBox[data-v-626ecdae] .el-table__header th {
        height: 40px;
      }

      ::v-deep .el-input__icon {
        line-height: 0;
      }

      .commonStyle {
        font-size: 19px;
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

.map_dialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    height: 50px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 6px 7px;
  }

  .mapBox {
    display: flex;
    flex-direction: column;
    align-items: center;

    .addMapBox {
      margin-bottom: 15px;

      .map {
        width: 486px;
        height: 372px;
      }
    }
  }
}
</style>
